/*公共 start*/
@font-face {
    font-family: 'CustomFont'; /* 自定义字体名称 */
    src: url('/source/ttf/youshe.ttf') format('truetype'); /* TTF 文件路径 */
}

body {
    background: #faf9f7;
}
.custom_font{
    font-family: 'CustomFont', sans-serif;
}
.banner {
    img {
        width: 100%;
    }
}

.local {
    font-size: 18px;
    color: #555;
    margin-top: 20px;
    margin-bottom: 40px;
    a {
        color: #555;
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (orientation: portrait) {
    .local {
        font-size: 12px;
        margin-bottom: 15px;
    }
}

.crumb {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    color: #4d7e81;
}

.crumb b {
    font-size: 28px;
}

.crumb p {
    display: inline-block;
    font-size: 25px;
    margin-left: 20px;
}

@media (orientation: portrait) {
    .crumb b {
        font-size: 22px;
        font-weight: normal;
    }

    .crumb p {
        font-size: 14px;
        margin-left: 10px;
    }
}

@media (max-width: 1350px) and (orientation:landscape) {
    .crumb p {
        font-size: 20px;
        margin-bottom: 2px;
    }
}

.animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.animation div {
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    width: 55px;
    height: 10px;
    display: flex;
    /* 使用flexbox布局 */
    justify-content: space-around;
    /* 元素水平居中分布 */
    align-items: center;
    /* 元素垂直居中对齐 */
}

.animation .black {
    animation-name: blackToRed;
}

.animation .red {
    animation-name: redToYellow;
    animation-delay: 1s;
    /* 延迟 1 秒开始 */
}

.animation .yellow {
    animation-name: yellowToBlack;
    animation-delay: 2s;
    /* 延迟 2 秒开始 */
}

@media (orientation: portrait) {
    .animation div {
        height: 10px;
        margin: 4px 0;
    }
}

/* 黑色到红色的动画 */
@keyframes blackToRed {
    0% {
        background-color: black;
    }

    50% {
        background-color: red;
    }

    100% {
        background-color: black;
    }
}

/* 红色到黄色的动画 */
@keyframes redToYellow {
    0% {
        background-color: red;
    }

    50% {
        background-color: yellow;
    }

    100% {
        background-color: red;
    }
}

/* 黄色到黑色的动画 */
@keyframes yellowToBlack {
    0% {
        background-color: yellow;
    }

    50% {
        background-color: black;
    }

    100% {
        background-color: yellow;
    }
}

.lines {
    width: 100%;
    position: relative;
}

.lines div {
    height: 20px;
    &:nth-of-type(1) {
        background: #83adab;
    }

    &:nth-of-type(2) {
        background: #52898c;
    }

    &:nth-of-type(3) {
        position: absolute;
        top: 4px;
        font-size: 18px;
        left: 30px;
        color: #fff;
    }
}

.shadow_tit {
    margin-top: 50px;
    text-align: center;
    margin-bottom: 30px;
}

.shadow_tit b {
    font-size: 28px;
    z-index: 2;
    margin-top: -50px;
}

.shadow_tit p {
    z-index: 1;
    margin-top: 20px;
    color: #e5e5e5;
    font-size: 24px;
}

/*公共 end*/
/*首页 Banner start*/
.index_logo_box{
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 50px 0 50px 0;
}
.index_logo_box img{
    width: 400px;
}
@media (orientation: portrait){
    .index_logo_box{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .index_logo_box img{
        width: 200px;
    }
}
#index_banner {
    position: relative;
}

#index_banner .swiper-container {
    height: auto;
}

#index_banner .swiper-container .swiper-slide {
    background-position: center;
    background-size: 100% auto;
}

#index_banner .swiper-container .swiper-slide img {
    width: 100%;
}

/*首页 Banner end*/
/*首页 预约加盟 start */
.form-wrapper {
    background-color: #ffffff;
    margin: 50px auto 0 auto;
    box-sizing: border-box;
    padding: 0 40px;
    /* 左右各留20px */
    border-radius: 10px;
    box-shadow: 5px 5px 7px #949494;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.form-wrapper h1 {
    color: #144c59;
    font-size: 24px;
    margin-right: 40px;
}

.form-wrapper .form-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.form-wrapper .form-container input {
    padding: 10px 10px;
    font-size: 14px;
    width: 150px;
    text-align: left;
    border-radius: 5px;
    border: 1px solid #555;
    outline: none;
}

.form-wrapper .form-container button {
    outline: none;
    border: 0;
    padding: 8px 25px;
    font-size: 14px;
    cursor: pointer;
    color: white;
    background-color: #144c59;
    border-radius: 3px;
}

@media (max-width: 1350px) and (orientation:landscape) {
    .form-wrapper {
        display: block;
        padding-top: 10px;
        margin-top: 30px;
    }

    .form-wrapper h1 {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    .form-wrapper .form-container {
        padding: 10px;
        width: 100%;
    }
}

@media (orientation: portrait) {
    .form-wrapper {
        display: block;
        padding-top: 20px;
        padding: 10px;
        background: #4b8c86;
        margin-top: 10px;
    }
    .form-wrapper h1{
        font-size: 16px;
        text-align: center;
        color: #fff;
    }
    .form-wrapper .form-container {
        /* flex-wrap: wrap; */
        padding: 8px 0px;
    }

    .form-wrapper .form-container input {
        width: 1%;
        margin-bottom: 0;
        padding: 7px 0;
        font-size: 8px;
        padding-left: 2px;
        flex-grow: 1;
        margin-right: 6px;
        text-align: center;
    }

    .form-wrapper .form-container button {
        width: auto;
        padding: 2px 8px;
        white-space: nowrap;
        border: 3px solid;
        box-sizing: border-box;
        font-size: 11px;
        border-radius: 4px;
    }
}

/*首页 预约加盟 end */
/* 可以做的项目 start*/
.service {
    padding-bottom: 40px;
    padding-top: 0;
    display: flex;
    justify-content: space-between;
}

.service .item {
    display: inline-block;
    width: 20%;
    color: #555;
    box-sizing: border-box;
    padding-bottom: 20px;
    background: #fff;
    float: left;
    cursor: pointer;
    margin-bottom: 40px;
    box-shadow: 0 0 19px #adadad;
    border: 1px solid #FFC300;
}

.service .item img {
    width: 100%;
}

.service .item b {
    font-size: 1.2em;
    margin-bottom: 20px;
    display: inline-block;
    text-align: left;
    background-image: url('/source/img/service_b_bg.png');
    background-size: 100% 100%;
    background-position-x: left;
    background-repeat: no-repeat;
    margin: 6px 0 8px 14px;
}

.service .item p {
    padding: 0 14px;
    font-size: 16px;
}

@media (max-width: 1350px) and (orientation:landscape) {
    .service .item {
        width: 30%;
        margin-right: 5%;
    }

    .service .item:last-child {
        margin-right: 0;
    }

    .service .item b {
        margin-top: 8px;
        margin-bottom: 9px;
    }

    .service .item p {
        font-size: 12px;
    }
}

@media (orientation: portrait) {
    .service {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 30px;
        padding: 0 2%;
    }

    .service .item {
        width: 48%;
        padding: 6px;
        margin-bottom: 20px;
    }

    .service .item b {
        margin-bottom: 5px;
    }

    .service .item p {
        font-size: 12px;
    }
}

/* 可以做的项目 end*/
/* 艺术涂料 start*/
.art_paint_tit {
    display: flex;
    justify-content: center;
    img {
        width: 500px;
    }
}

.art_paint {
    padding-bottom: 40px;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
}

.art_paint .item {
    display: inline-block;
    width: 14%;
    color: #3F8B88;
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 50px;
    background: #fff;
    float: left;
    cursor: pointer;
    margin-bottom: 40px;
}

.art_paint .item p {
    text-align: center;
}

@media (max-width: 1350px) and (orientation:landscape) {
    .art_paint .item {
        width: 18%;
    }
}

@media (orientation: portrait) {
    .art_paint_tit img {
        width: 70%;
    }

    .art_paint {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
        padding: 30px 2% 0px 2%;
    }

    .art_paint .item {
        width: 30%;
        padding: 6px;
        margin-right: 3%;
        margin-bottom: 20px;
        text-align: center;
    }

    .art_paint .item img {
        width: 80%;
    }
}

.art_paint .item:hover {
    box-shadow: 0 0 19px #adadad;
}

.art_paint .item:last-child {
    margin-right: 0;
}

/* 艺术涂料 end*/
/* 服务理念 start*/
.service_philosophy_box {
    margin-top: 80px;
}

.service_philosophy {
    padding-bottom: 40px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
}

.service_philosophy .item {
    display: inline-block;
    width: 23%;
    color: #555;
    box-sizing: border-box;
    background: #fff;
    float: left;
    cursor: pointer;
    margin-bottom: 40px;
    border: 1px solid #555;
}

.service_philosophy .item:hover {
    box-shadow: 0 0 19px #adadad;
}

.service_philosophy .item img {
    width: 100%;
    aspect-ratio: 1;
}

.service_philosophy .item b {
    font-size: 1.2em;
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

@media (max-width: 1350px) and (orientation:landscape) {
    .service_philosophy .item {
        width: 30%;
        margin-right: 5%;
    }

    .service_philosophy .item:last-child {
        margin-right: 0;
    }

    .service_philosophy .item b {
        margin-bottom: 5px;
    }
}

@media (orientation: portrait) {
    .service_philosophy_box {
        margin-top: 0;
    }

    .service_philosophy {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;
        padding: 0 2%;
    }

    .service_philosophy .item {
        width: 48%;
        padding: 0;
        margin-bottom: 20px;
    }

    .service_philosophy .item b {
        margin-bottom: 5px;
        height: 30px;
        line-height: 30px;
    }
}

/* 服务理念 end*/
/* 艺术涂料 start*/
.colorful_tit {
    text-align: center;
    color: #3f8b88;
}

.colorful_tit b {
    display: block;
    font-size: 28px;
    margin-bottom: 20px;
}

.colorful_tit p {
    font-size: 18px;
    display: block;
}

.colorful {
    padding-bottom: 40px;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
}

.colorful .item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 200px;
    height: 200px;
    color: #fff;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    margin-bottom: 40px;
    border-radius: 50%;
}

.colorful .item:nth-of-type(1) {
    background: #2a82e4;
}

.colorful .item:nth-of-type(2) {
    background: #9e2992;
}

.colorful .item:nth-of-type(3) {
    background: #d43030;
}

.colorful .item:nth-of-type(4) {
    background: #ff8d1a;
}

.colorful .item:nth-of-type(5) {
    background: #a5d63f;
}

.colorful .item b {
    text-align: center;
    margin-bottom: 10px;
    white-space: nowrap;
}

@media (max-width: 1350px) and (orientation:landscape) {
    .colorful .item {
        width: 170px;
        height: 170px;
    }
}

@media (orientation: portrait) {
    .colorful_tit b {
        margin-bottom: 0;
        font-size: 18px;
    }

    .colorful_tit p {
        font-size: 10px;
        margin-top: 5px;
    }

    .colorful_tit img {
        width: 70%;
    }

    .colorful {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
        padding: 20px 2% 0 2%;
    }

    .colorful .item {
        width: 100px;
        height: 100px;
        padding: 6px;
        margin-right: 4%;
        margin-bottom: 20px;
        text-align: center;
        font-size: 8px;
    }

    .colorful .item img {
        width: 80%;
    }
}

.colorful .item:hover {
    box-shadow: 0 0 19px #adadad;
}

.colorful .item:last-child {
    margin-right: 0;
}

/* 艺术涂料 end*/
/* 关于我们 start*/
.about_us {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 80px;
    &>* {
        margin-bottom: 20px;
    }

    .mb_bucket {
        display: none;
    }

    .pc_bucket {
        width: 40%;
    }
    .pc_bucket img{
        width: 100%;
    }

    .text {
        width: 50%;
        p {
            margin-bottom: 10px;
        }


    }
}

.about_us {font-size: 28px;line-height: 42px;}
@media (max-width: 1650px) {  .about_us {font-size: 26px;line-height: 39px;}  }
@media (max-width: 1550px) {  .about_us {font-size: 24px;line-height: 37px;}  }
@media (max-width: 1450px) {  .about_us {font-size: 22px;line-height: 34px;}  }
@media (max-width: 1350px) {  .about_us {font-size: 16px;line-height: 43px;}  }
@media (max-width: 1250px) {  .about_us {font-size: 18px;line-height: 28px;}  }
@media (max-width: 1050px) {  .about_us {font-size: 16px;line-height: 32px;}  }
@media (orientation: portrait) {  .about_us {font-size: 12px;line-height: 20px;}  }


@media (orientation: portrait) {
    .about_us {
        & > * {
            margin-bottom: 20px;
        }

        .mb_bucket {
            width: 66%;
            display: block;
            margin: 20px auto 20px auto;
        }

        .text:nth-of-type(2) {
            .mb_bucket {
                /*margin-bottom: 10px;*/
            }
        }

        .pc_bucket {
            display: none;
        }

        .text {
            width: 100%;
            p {
                margin-bottom: 10px;
            }

        }

        margin-bottom: 20px;
    }
}

/* 关于我们 end*/
/* 企业理念 start*/
.idea {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .item {
        width: 30%;
        text-align: center;
        /* 使图片、标题和文本居中 */
    }

    .item .title {
        color: #618c90;
        margin-top: 5px;
        font-size: 20px;
    }

    .item .text {
        color: #618c90;
        margin-top: 5px;
        margin-bottom: 70px;
        font-size: 14px;
        text-align: center;
    }
}

@media (orientation: portrait) {
    .idea {
        display: block;
        margin-top: 0;
        .item {
            width: 70%;
            margin: 0 auto;
        }

        .item .title {
            font-size: 16px;
        }

        .item .text {
            margin-bottom: 20px;
            font-size: 10px;
            text-align: center;
            white-space: nowrap;
        }
    }
}

/* 企业理念 end*/
/* 品牌优势 start*/
.brand_box {
    background: #4d7e82;
    color : #fff;
    text-align: center;
    padding-top: 60px;
    margin-top: 20px;
    .crumb {
        color: #fff;
    }

    .animation {
        background: #4d7e82;
        width: 200px;
        margin: 0 auto 0 auto;
        z-index: 1;
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
    }

    .brand_desc {
        margin-top: 30px;
        position: relative;
        border: 3px solid #ffeb3c;
        display: inline-flex;
        margin-bottom: 40px;
        .item {
            padding: 30px 40px;
        }
    }

    .brand_list {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .brand_list .item {
        width: 40%;
        background: #7a9e9c;
        margin-bottom: 20px;
        padding: 20px;
    }

    .brand_list .item p {
        font-size: 16px;
        text-align: justify;
    }
    .brand_list .item:nth-of-type(4) p{
        text-align: center;
    }

    .brand_list .tit {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        align-items: center;
    }

    .brand_list .tit img {
        width: 50px;
        margin-right: 20px;
    }

    .brand_list .tit h1 {
        font-size: 20px;
    }
}

@media (orientation: portrait) {
    .brand_box {
        width: 100%;
        padding-top: 20px;
    }

    .brand_box .brand_desc {
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .brand_box .brand_desc .item {
        padding: 15px 20px;
    }

    .brand_box .brand_list {
    }

    .brand_box .brand_list .item {
        width: 48%;
        padding: 10px;
    }

    .brand_box .brand_list .item .tit {
        white-space: nowrap;
        margin-bottom: 10px;
    }

    .brand_box .brand_list .item .tit img {
        width: 30px;
    }

    .brand_box .brand_list .item .tit h1 {
        font-size: 16px;
    }

    .brand_box .brand_list .item p {
        font-size: 10px;
    }
}

/* 品牌优势 end*/
/* 产品中心 start*/
.product {
    padding-top: 40px;
    padding-bottom: 20px;
    .lists {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
            width: 30%;
            margin-bottom: 20px;
            border: 1px solid #555;
        }

        .item img {
            width: 100%;
        }

        .item .tit {
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }
    }

    .more {
        display: block;
        background: #fff;
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        border: 1px solid #555;
        margin: 0 auto 40px auto;
    }

    .lines {
        width: 100%;
        div {
            height: 20px;
            &:nth-of-type(1) {
                background: #57814f;
            }

            &:nth-of-type(2) {
                background: #316541;
            }
        }
    }
}

@media (orientation: portrait) {
    .product .more {
        height: 30px;
        line-height: 30px;
        width: 120px;
        margin-bottom: 20px;
        border: 0;
        color: #c0c0c0;
    }
}

/* 产品中心 end*/

/*服务流程 start*/
.process {
    .lists {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
            width: 48%;
            aspect-ratio: 1 / 1.15;
            margin-bottom: 40px;
            box-shadow: 5px 5px 5px #999;
            border-radius: 5px;
        }

        .item img {
            width: 100%;
        }

        .item div {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            margin-bottom: 10px;
            padding-top: 5px;
        }

        .item div b {
            color: #c5c5c5;
            font-size: 7em;
            margin-right: 10px;
            font-weight: normal;
        }

        .item div span {
            padding: 0 20px;
            display: inline-block;
            background-size: 100% 100%;
            font-size: 4rem;
            color: #000;
            background-image: url('/source/img/speck.png');
        }

        .item p {
            padding: 0 20px;
            color: #4d7e81;
            font-size: 2rem;
        }
    }
}

@media (max-width: 1350px) and (orientation:landscape) {
    .process {
        .lists {
            .item {
                width: 48%;



                div {
                    b {
                        font-size: 5rem;
                    }

                    span {
                        font-size: 3rem;
                    }
                }

                p {
                    font-size: 2rem;
                }
            }
        }
    }
}

@media (orientation: portrait) {
    .process {
        .lists {
            .item {
                width: 47%;

                div {
                    b {
                        font-size: 2rem;
                    }

                    span {
                        font-size: 1rem;
                    }
                }

                p {
                    font-size: .8rem;
                }
            }
        }
    }
}

/*服务流程 end*/
/*网站底部 start*/
.footer {
    width: 100%;
    height: auto;
    background-color: #2e635a;
    .bottom_box {
        display: flex;
        justify-content: space-between;
        .bb_logo {
            margin-top: 60px;
            margin-left: 60px;
            height: 80px;
        }

        .bo_box {
            display: flex;
            justify-content: center;
            margin: 60px 40px 40px 60px;
            .bb_cate {
                margin: 0 50px;
                .bb_title {
                    font-size: 22px;
                    display: flex;
                    justify-content: center;
                    margin-bottom: 30px;
                    white-space: nowrap;
                    color: #fff;
                    .a {
                        color: #fff;
                    }
                }

                .ul {
                    .uy {
                        display: block;
                        color: #c3d2cf;
                        margin-bottom: 20px;
                        margin-left: 10px;
                        white-space: nowrap;
                    }
                }
            }
        }
    }

    .address_box {
        display: flex;
        justify-content: space-between;
        margin: 20px 180px 0 80px;
        padding-bottom: 60px;
        .ab_box {
            .ab_text {
                color: #c3d2cf;
                margin-bottom: 20px;
            }

            .add_box {
                display: flex;
                .ab_weixin {
                    margin-right: 10px;
                }

                .ab_digit {
                    margin-top: -3px;
                    font-size: 22px;
                    color: #f7f8f8;
                }
            }
        }
    }
}


@media (max-width: 1350px) and (orientation:landscape) {
    .footer {
        .bottom_box {
            .bb_logo {
                margin-top: 20px;
                width: 200px;
                margin-left: 0;
            }

            .bo_box {
                margin: 20px 0 0 30px;
                .bb_cate {
                    margin: 0 20px;
                    .bb_title {
                        font-size: 18px;
                        margin-bottom: 20px;
                    }
                }
            }
        }

        .address_box {
            margin: 0;
            .ab_box {
                .add_box {
                    .ab_digit {
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

@media (orientation: portrait) {
    .footer {
        display: none;
    }
}

.icp{
    background-color: #2e635a;
    text-align: center;
    padding: 20px 0;
}
.icp a{
    color: #fff;
}
@media (orientation: portrait) {
    .icp{
        padding-top: 10px;
        background: unset;
        padding-bottom: 80px;
    }
    .icp a{
        color: #555;
    }
}

/*网站底部 end*/
/*加盟支持 start*/
.support {
    background-image: url('/source/img/sup_bg.png');
    background-size: cover;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    .item {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 30px 0;
        &:nth-of-type(2n-1) {
            flex-direction: row-reverse;
        }

        .main {
            color: #215c55;
            div {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                font-size: 28px;
                margin-bottom: -30px;
                position: relative;
                z-index: 1;






































                b {
                    font-weight: normal;
                    font-size: 46px;
                }

                span {
                    margin-left: 20px;
                    font-size: 34px;
                }
            }

            img {
                width: 300px;
                border-radius: 200px;
            }
        }

        .desc {
            width: 300px;
        }
    }
}

@media (orientation: portrait) {
    .support {
        width: 100%;
        max-width: 100%;
        .item {
            .main div{
                margin-bottom: -20px;
            }
            .main div b{
                font-size: 28px;
            }
            .main div span{
                font-size: 22px;
                margin-left: 4px;
            }
            .desc {
                max-width: 50%;
                padding: 0 20px;
            }
        }
    }
}

/*加盟支持 end*/
/*产品中心 start*/
.product_cate {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 10px;
    .active {
        color: #555;
        background: #b4dde1;
    }
}

.product_cate a {
    padding: 10px 0;
    width: 200px;
    text-align: center;
    color: #555;
    background: #fff;
    margin: 0 1px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #bfbfbf;
}

@media (orientation: portrait) {
    .product_cate {
        padding: 6px 10px;
        margin-bottom: 10px;
    }
}


.series_cate {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 10px;
    .active {
        color: #246569;
        background: #ffeb3c;
    }
}

.series_cate a {
    padding: 10px 0;
    width: 200px;
    text-align: center;
    color: #fff;
    background: #246569;
    margin: 0 1px;
}

@media (orientation: portrait) {
    .series_cate {
        padding: 6px 10px;
        margin-bottom: 10px;
    }
}

.product_list {
}

.product_list .item {
    display: flex;
    color: #5d9ea4;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #1e6f73;
}

.product_list .item .thumb {
    margin-right: 40px;
    width: 33%;
}
.product_list .item .thumb img{
    width: 100%;
}

.product_list .item .content {
    position: relative;
    width: 1%;
    flex-grow: 1;
}

.product_list .item .content .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.product_list .item .content .top .en_tit {
    color: #818181;
}

.product_list .item .content .top .more {
    color: #5d9ea4;
}

.product_list .item .content .title {
    font-size: 32px;
    margin-bottom: 20px;
}

.product_list .item .content .desc {
    line-height: 26px;
    margin-bottom: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
}

.product_list .item .content .seka {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
}

.product_list .item .content .seka img {
    width: 32%;
}

@media (orientation: portrait) {
    .product_list .item {
        margin-bottom: 30px;
        padding: 0;
        padding-bottom: 10px;
    }

    .product_list .item .thumb {
        width: 44%;
        margin-right: 5%;
    }

    .product_list .item .content{
        width: 50%;
    }
    .product_list .item .content .title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .product_list .item .content .top {
        margin-bottom: 10px;
    }

    .product_list .item .content .desc {
        margin-bottom: 20px;
        line-height: 19px;
        max-height: 57px;
    }

    .product_list .item .content .seka {
        position: relative;
        margin-bottom: 10px;
    }
}

.product_list1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .item {
        width: 30%;
        border: 1px solid #5d9ea4;
        padding-bottom: 20px;
        img {
            margin-bottom: 20px;
        }

        .title {
            text-align: center;
        }

        .desc {
            text-align: center;
        }
    }
}

.product_list2 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.product_list2 .item {
    width: 33.3%;
    padding-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid #246569;
    text-align: center;
}
.product_list2 .item img {
    margin-bottom: 20px;
    aspect-ratio: 1 / 0.85;
}

.product_list2 .item .title {
    text-align: center;
}

.product_list2 .item .detail {
    margin: 20px 30px 0 30px;
    background: #264d48;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    padding: 4px 0;
}

@media (orientation: portrait) {
    .product_list2 .item {
        width: 48%;
        margin-bottom: 20px;
        padding-bottom: 10px;
        box-shadow: 2px 2px 5px #b4b4b4;
    }

    .product_list2 .item img {
        width: 68%;
        margin: 7px auto;
        display: block;
    }

    .product_list2 .item .title {
    }

    .product_list2 .item .detail {
        font-size: 12px;
        margin: 9px 30px 0 30px;
    }
}

/*产品中心 end*/
/*产品详情 start*/
.goods-top {
    width: 450px;
    margin: 10px auto 0 auto;
}

.goods-top .swiper-slide {
    overflow: hidden;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    margin-right: 10px;
}
.goods-top-box{
    position: relative;
}
.goods-top-box .goods-top-swiper-button-next{
    position: absolute;
    right: 0;
    top: 23px;
    height: 100px;
    width: 60px;
    border: 1px solid #8f8f8f;
}
.goods-top-box .goods-top-swiper-button-next:after{
    color: #8f8f8f;
}

.goods-top-box .goods-top-swiper-button-prev{
    position: absolute;
    left: 0;
    top: 23px;
    height: 100px;
    width: 60px;
    border: 1px solid #8f8f8f;
}
.goods-top-box .goods-top-swiper-button-prev:after{
    color: #8f8f8f;
}


.goods-thumbs {
    width: 600px;
    height: 439px;
    margin: 0;
}

.goods-thumbs .swiper-slide {
    position: relative;
}

.goods-thumbs .swiper-slide img {
    width: 100%;
    height: 439px;
}

.goods-thumbs .swiper-slide .desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.51);
    padding: 10px 20px;
}

.goods_main {
    display: flex;
    .goods_content {
        padding-left: 40px;
        width: 100%;
        .title {
            font-size: 28px;
            font-weight: bold;
            margin-top: 50px;
        }

        .line {
            font-size: 18px;
            border-bottom: 1px solid #555;
            margin: 20px 0;
            padding-bottom: 10px;
        }

        .free {
            background: #306266;
            color: #fff;
            font-size: 26px;
            text-align: center;
            width: 193px;
            height: 70px;
            line-height: 70px;
            border-radius: 10px;
            margin: 18px auto 0 auto;
        }

        .tel_box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .tel {
                color: #306266;
                font-size: 59px;
                font-weight: bold;
                margin-top: 33px;
            }
            .tel img{
                width: 40px;
            }
            .tel a{
                color: #306266;
            }
        }
    }
}

@media (orientation: portrait) {
    .goods-top {
        width: 70%;
    }
    .goods-top-box .goods-top-swiper-button-next{
        height: 60px;
        width: 10%;
    }
    .goods-top-box .goods-top-swiper-button-prev{
        height: 60px;
        width: 10%;
    }

    .goods_main {
        flex-direction: column;
        .goods_content {
            padding: 0;
            .title {
                margin-top: 20px;
                font-size: 24px;
            }

            .line {
                font-size: 14px;
            }

            .tel_box {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                .free {
                    margin: 0;
                    height: 40px;
                    font-size: 20px;
                    line-height: 40px;
                }

                .tel {
                    margin-top: 0;
                    font-size: 22px;
                    white-space: nowrap;
                }
                .tel img{
                    width: 26px;
                }
            }
        }
    }

    .goods-thumbs {
        width: 100%;
        height: 256px;
    }

    .goods-thumbs .swiper-slide img {
        height: 256px;
    }
}

.goods_detail {
    margin-top: 40px;
    padding-bottom: 30px;
    .title_box {
        height: 50px;
        line-height: 50px;
        background: linear-gradient(to bottom,#518c9c,#fff);
        margin-bottom: 20px;
        .tit {
            text-align: center;
            width: 100px;
            background: #518c9c;
            color: #fff;
        }
    }

    .desc_box {
        color: #fff;
        background: linear-gradient(to right,#49908a,#49908a,#49908a,#fff);
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 30px;
        .name {
            text-align: center;
            font-size: 32px;
        }

        .desc {
            margin: 30px 100px 0 100px;
        }
    }

    .show {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        img {
            width: 45%;
            margin: 20px 0;
        }
    }

    .hots {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }

    .hots .item {
        width: 20%;
        box-shadow: 5px 5px 5px #949494;
        border-radius: 5px;
    }

    .hots .item b {
        text-align: center;
        padding: 8px 0;
    }
}

@media (orientation: portrait) {
    .goods_detail {
        .title_box {
            margin-bottom: 0;
        }

        .desc_box {
            .name {
                font-size: 24px;
            }

            .desc {
                margin: 20px 20px 0 20px;
            }
        }

        .show {
            display: block;
        }

        .show img {
            display: block;
            width: 90%;
            margin: 10px auto;
        }

        .hots {
            flex-wrap: wrap;
            .item {
                width: 45%;
                margin-bottom: 20px;
            }
        }
    }
}

/*产品详情 end*/
/*色彩灵感 start*/
.colorful_cate {
    background: #5d9ea4;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px 100px;
    border-radius: 6px;
    margin-bottom: 30px;
    margin-top: 10px;
    .active {
        color: #fff;
        background: #8dbabf;
    }
}

.colorful_cate a {
    border-radius: 6px;
    padding: 4px 0;
    width: 200px;
    text-align: center;
    color: #fff;
}

#colorful_swiper {
    position: relative;
    margin-bottom: 20px;
}

#colorful_swiper .swiper-container {
    height: auto;
}

#colorful_swiper .swiper-container .swiper-slide {
    background-position: center;
    background-size: 100% auto;
}

#colorful_swiper .swiper-container .swiper-slide img {
    width: 100%;
}

#colorful_swiper .swiper-container .swiper-slide .content {
    padding: 20px;
    margin-top: 15px;
}

#colorful_swiper .swiper-container .swiper-slide .content b {
}

#colorful_swiper .swiper-container .swiper-slide .content p {
}

@media (orientation: portrait) {
    .colorful_cate {
        padding: 6px 10px;
        margin-bottom: 10px;
    }
    #colorful_swiper .swiper-button-prev{
        top: 30%;
    }
    #colorful_swiper .swiper-button-next{
        top: 30%;
    }
}

/*色彩灵感 end*/
/*色彩与性格 start*/
.color_and_personality {
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
    img {
        width: 380px;
    }

    .desc {
        width: 370px;
        color: #3a7a70;
        margin-left: 20px;
        padding: 0 20px;
        line-height: 30px;
    }
}

.gallery-top {
    width: 250px;
    margin: 0;
    margin-left: 20px;
}

.gallery-top .swiper-slide {
    overflow: hidden;
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    cursor: pointer;
}

.gallery-thumbs {
    width: 500px;
    height: 640px;
    margin: 0;
}

.gallery-thumbs .swiper-slide {
    position: relative;
}

.gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 640px;
}

.gallery-thumbs .swiper-slide .desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.51);
    padding: 10px 20px;
}

.personality {
    display: flex;
    justify-content: center;
}

.swiper-slide-thumb-active {
}

@media (orientation: portrait) {
    .gallery-top {
        width: 60px;
        margin-left: 5px;
    }

    .gallery-top .swiper-slide {
        width: 60px;
        padding: 5px;
    }

    .gallery-thumbs {
        width: calc(100% - 60px);
        height: 400px;
    }

    .gallery-thumbs .swiper-slide img {
        height: 400px;
    }

    .color_and_personality {
        display: block;
    }

    .color_and_personality .desc {
        margin: 0;
        width: 100%;
        padding: 20px;
    }
}

/*色彩与性格 end*/


/* 加盟代理 start*/
.agent_box{
    margin-top: 30px;
}


@media (orientation:landscape){
    .join-list{
        display:flex;
        justify-content: space-between;
        margin-bottom: 60px;
    }
    .join-list .join-item{
        cursor: pointer;
        width: calc(100% / 6);
        height: 568px;
        position: relative;
        color: #5AA380;
        background: #000;
        overflow: hidden;
    }
    .join-list .join-item img{
        border: none;
        display: block;
        height: 284px;
        width: 100%;
        transition:opacity 0.3s;
        position: absolute;
        margin-top: 284px;
    }
    .join-list .join-item.bottom img{
        margin-top: 0;
    }
    .join-list .join-item .join-index, .join-list .join-item .join-title{
        width: 100%;
        position: absolute;
        text-align: center;
        z-index: 2;
        transition: all 0.3s;
    }
    .join-list .join-item .join-index{
        font-size: 40px;
        font-weight: bold;
        margin-top: 30px;
    }
    .join-list .join-item .join-title{
        font-size: 18px;
        margin-top: 90px;
    }
    .join-list .join-item .join-content{
        background: #fff;
        width: 100%;
        height: 284px;
        position: relative;
        position: absolute;
        margin-top: 0px;
        transition: all 0.3s;
    }
    .join-list .join-item.bottom .join-content{
        margin-top:284px;
    }
    .join-list .join-item .join-content div{
        position: absolute;
        width: 100%;
        padding: 0 20px;
        margin-top: 125px;
        font-size: 12px;
        color: #626262;
        line-height: 20px;
        text-align: justify;
        transition: all 0.2s;
    }
    .join-list .join-item.bottom .join-index{
        margin-top: 317px;
    }
    .join-list .join-item.bottom .join-title{
        margin-top: 370px;
    }
    .join-list .join-item:hover img{
        opacity: 0.5;
        margin-top: 0;
    }
    .join-list .join-item:hover .join-index{
        margin-top: 105px;
    }
    .join-list .join-item:hover .join-title{
        margin-top: 158px;
    }
    .join-list .join-item:hover .join-content div{
        margin-top: 30px;
        font-size: 16px;
        line-height: 26px;
    }
    .join-list .join-item:hover .join-content{
        margin-top: 284px;
        display: flex;
        align-items: center;
        background: #5AA380;
    }
    .join-list .join-item:hover .join-content div{
        position: relative;
        margin-top: 0;
        color: #fff;
    }

}
@media (max-width: 1350px) and (orientation:landscape){
    .join-list .join-item .join-index{
        margin-top: 0;
    }
    .join-list .join-item.bottom .join-index{
        margin-top: 280px;
    }
    .join-list .join-item .join-title{
        margin-top: 55px;
    }
    .join-list .join-item.bottom .join-title{
        margin-top: 334px;
    }
    .join-list .join-item .join-content div{
        margin-top: 92px;
    }
}
@media (orientation: portrait){
    .join-list{
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 60px;
    }
    .join-list .join-item{
        cursor: pointer;
        width: calc(100% / 3);
        height: 320px;
        position: relative;
        color: #5AA380;
        background: #000;
        overflow: hidden;
    }
    .join-list .join-item img{
        border: none;
        display: block;
        height: 160px;
        width: 100%;
        transition:opacity 0.3s;
        position: absolute;
        margin-top: 160px;
    }
    .join-list .join-item.bottom img{
        margin-top: 0;
    }
    .join-list .join-item .join-index, .join-list .join-item .join-title{
        width: 100%;
        position: absolute;
        text-align: center;
        z-index: 2;
        transition: all 0.3s;
    }
    .join-list .join-item .join-index{
        font-size: 18px;
        margin-top: 0px;
        font-weight: bold;
    }
    .join-list .join-item .join-title{
        font-size: 12px;
        margin-top: 25px;
    }
    .join-list .join-item .join-content{
        background: #fff;
        width: 100%;
        height: 160px;
        position: relative;
        position: absolute;
        margin-top: 0px;
        transition: all 0.3s;
    }
    .join-list .join-item.bottom .join-content{
        margin-top: 160px;
    }
    .join-list .join-item .join-content div{
        position: absolute;
        width: 100%;
        margin-top: 44px;
        padding: 0px 7px;
        font-size: 8px;
        color: #626262;
        line-height: 14px;
        text-align: justify;
        transition: all 0.2s;
    }
    .join-list .join-item.bottom .join-index{
        margin-top: 158px;
    }
    .join-list .join-item.bottom .join-title{
        margin-top: 182px;
    }
    .join-list .join-item:hover img{
        opacity: 0.5;
        margin-top: 0;
    }
    .join-list .join-item:hover .join-index{
        margin-top: 38px;
    }
    .join-list .join-item:hover .join-title{
        margin-top: 80px;
    }
    .join-list .join-item:hover .join-content div{
        margin-top: 30px;
        font-size: 16px;
        line-height: 26px;
    }
    .join-list .join-item:hover .join-content{
        margin-top: 160px;
        display: flex;
        align-items: center;
        background: #5AA380;
    }
    .join-list .join-item:hover .join-content div{
        position: relative;
        margin-top: 0;
        color: #fff;
        font-size: 8px;
        line-height: 14px;
    }
}
/*加盟代理 end*/
